<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="billiards-box" :class="{'repair-box':tableInfo.status==3}">
					<view class="table-info flexWrapNo">
						<view class="big">{{numText}}</view>
						<view class="info">
							<view class="table-name">{{characters}} 
								<!-- <text class="status">空闲中</text> -->
								<view class="status" :class="{busy:tableInfo.status==2||tableInfo.status==99,repair:tableInfo.status==3}">{{tableInfo.status==2||tableInfo.status==99?'使用中':tableInfo.status==3?'维护':'空闲'}}</view>
							</view>
							<view class="store-name flexWrapNo">
								<image src="../static/home/navigation-icon.png" class="navigation-icon"></image>
								{{tableInfo.shop_name}}
							</view>
						</view>
					</view>
					<view class="time-box flexWarpCenterColumn">
						<view class="time-tips">即将开台时间</view>
						<view class="time">
							02:05:00
						</view>
					</view>
					<view class="center-box flexWarpCenterColumn">
						<view class="appointment-tips">今日暂无预约</view>
						<image src="../static/home/down-icon.png" class="down-icon"></image>
					</view>
					<view class="lattice-box flexWrapNo">
						<view class="lattice-item flexWarpCenterColumn" v-for="(item,index) in hoursList" :key='index' v-if="index<=23">
							<view class="lattice" :class="{white:index>pastHour,blue:index>=currentHour&&index<=allHour,red:item.order_type!=0}">
								<text class="lattice-text">{{item.time}}</text>
							</view>
						</view>
					</view>
					<!-- <view class="lattice-box flexWrapNo" v-if="allHour>23">
						<view class="lattice-item flexWarpCenterColumn" v-for="(item,index) in hoursList" :key='index' v-if="index>23">
							<view class="lattice white" :class="{blue:item.time<=allHour-24,red:item.order_type!=0}">
								<text class="lattice-text">{{item.time}}</text>
							</view>
						</view>
					</view> -->
				</view>
				<view class="mode-box flexWrap">
					<view class="mode-item" @tap="goOrder(0)" :class="{disabled:tableInfo.status==2}" >
						<image src="../static/home/immediately-icon.png" class="mode-img"></image>
						<view class="mode-cont">
							<view class="mode-title">立即开台</view>
							<view>默认就近一小时开台</view>
						</view>
					</view>
					<view class="mode-item" @tap="goOrder(1)">
						<image src="../static/home/appointment-icon.png" class="mode-img"></image>
						<view class="mode-cont">
							<view class="mode-title">预约开台</view>
							<view>默认预约5分钟后开台</view>
						</view>
					</view>
				</view>
				<view class="service-box flexWrapNo">
					<image src="../static/user/service.png" class="service-icon"></image>
					{{tableInfo.customer_service_mobile}}
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				currentHour:0,
				totalHour:1,
				pastHour:0,
				dateIndex:0,
				nextIndex:0,
				status:1,
				equipment_id:"",
				tableInfo:{},
				hoursList:[],
				store_id:"",
				allHour:0,
				type:1,
				// 美团
				meituan_id: "",
				qr_code: "",
				meituan_coupon_id: "",
				// 抖音
				douyin_id:"",
				tuan_type:"",
				numText:"",
				characters:""
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		computed:{
			totalPrice(){
				let totalPrice=0;
				totalPrice+=Number(this.totalHour*this.tableInfo.price)
				return totalPrice.toFixed(2);
			},
		},
		onLoad(ops) {
			console.log(ops)
			this.tuan_type=ops.tuan_type
			this.meituan_id = ops.meituan_id||''
			this.qr_code = ops.qr_code||''
			this.meituan_coupon_id = ops.id||''
			
			this.douyin_id=ops.douyin_id||''
			this.tableDetails();
		},
		methods: {
			goOrder(type){
				let order_type=""
				order_type=type==0?'immediately':'make_appointment'
				if(this.tuan_type==0){
					uni.navigateTo({
						url:'/moduleA/verificationOrder?meituan_id='+this.meituan_id+'&qr_code='+this.qr_num+'&id='+this.meituan_coupon_id+'&order_type='+order_type
					})
				}else{
					uni.navigateTo({
						url:'/moduleA/douyinVerificationOrder?qr_code='+this.qr_code+'&douyin_id='+this.douyin_id+'&order_type='+order_type
					})
				}
			},
			// 加分钟
			addMinutes(date,num){
				var time = new Date();
				var time1 =Date.parse(date.replace(/-/g, '/'))
				time.setTime(time1 + 60000*num);
				let hours=time.getHours()<=9?'0'+time.getHours():time.getHours()
				let minutes=time.getMinutes()<=9?'0'+time.getMinutes():time.getMinutes()
				return hours+":"+minutes
			},
			checkTime(i) {
			    if (i < 10) {
			        i = "0" + i;
			    }
			    return i;
			},
			// 获取当前日期
			getDate(type,num){
				num=num||0
				var time = new Date();
				time.setDate(time.getDate() + num);
				let year=time.getFullYear()
				let month=time.getMonth()+1
				let day=time.getDate()
				let fullDate=""
				if(type==0){
					fullDate=year+'-'+month+'-'+day
				}else{
					fullDate=month+'月'+day+'日'
				}
				return fullDate;
			},
			// 获取当前时间
			getTimeString(currmentDate,num){
				num=num||0
				var time = new Date();
				var time1 =currmentDate?Date.parse(currmentDate.replace(/-/g, '/')):new Date().getTime();//如果传了日期就获取日期，否则获取当前时间
				time.setTime(time1 + 3600000*num);
				let hours=time.getHours()<=9?'0'+time.getHours():time.getHours()
				let minutes=time.getMinutes()<=9?'0'+time.getMinutes():time.getMinutes()
				return hours+":"+minutes
			},
			// 获取各个参数
			getHoursData(){
				var time = new Date();
				this.currentHour=time.getHours()//当前小时
				if((this.tableInfo.yuyue&&this.currmentIndex!=0)||this.renew_order_id){//如果有预约时间就从预约时间开始
					let addTime=this.addMinutes(this.getDate(0)+' '+this.tableInfo.yuyue,1)
					let currmentTime=this.getDate(0)+' '+addTime
					if(this.tableInfo.day_yuyue){//如果有预约
						this.currentHour=this.tableInfo.yuyue.split(':')[0]
						this.dateIndex+=1
						this.nextIndex=this.dateIndex+1
						let key=Object.keys(this.tableInfo.t_date)
						this.hoursList=this.tableInfo.t_date[key[this.dateIndex]]//获取当前天的格子
						console.log('不是同一天111111')
					}
				}else{
					this.currmentTime=this.getTimeString()//获取当前时间
				}
				this.allHour=Number(this.totalHour)+Number(this.currentHour)
				this.pastHour=this.currentHour-1//过去了多少个小时
			},
			// 桌球详情
			tableDetails(){
				this.$request.post(this.$api.tableDetails, {
					store_id:uni.getStorageSync('store_id'),
					equipment_id: uni.getStorageSync('equipment_id')
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.tableInfo=data
						let nameList=this.tableInfo.equipment_name.split('')
						let isNaNEmpty = false //是否有数字
						isNaNEmpty =nameList.some(item =>!isNaN(item))
						if(!isNaNEmpty||isNaN(nameList[0])){	
							for(let i in nameList){
								if(i==0){
									this.numText+=nameList[i]
								}else{
									this.characters+=nameList[i]
								}
							}
						}else{
							for(let i in nameList){
								if(!isNaN(nameList[i])){
									this.numText+=nameList[i]
								}else{
									this.characters+=nameList[i]
								}
							}
						}
						this.days_in_advance=data.days_in_advance
						this.type=data.type
						uni.setStorageSync('type',this.type)
						this.getHoursData();
						let key=Object.keys(this.tableInfo.t_date)
						if(this.days_in_advance==0||this.days_in_advance==1){
							this.hoursList=this.tableInfo.t_date[key[0]]
						}else{
							this.hoursList=this.tableInfo.t_date[key[0]].concat(this.tableInfo.t_date[key[1]])
						}
						if(data.type==2){
							this.minReservationTime=data.minimum_reservation_time
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 28upx;
	}
	.billiards-box{
		padding: 40upx 32upx;
		min-height: 232rpx;
		background: linear-gradient( 180deg, #3D46C7 0%, #7781FD 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		.table-info{
			.big{
				font-family: Arial, Arial;
				font-weight: bold;
				font-size: 136rpx;
				color: #F9FAFE;
			}
			.info{
				margin-left: 20upx;
				.table-name{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 34rpx;
					color: #F9FAFE;
					.status{
						display: inline-block;
						width: 118rpx;
						line-height:48upx;
						height: 48rpx;
						background: linear-gradient( 180deg, #4AA22A 0%, #69D037 100%);
						border-radius: 48rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFFFFF;
						text-align: center;
						margin-left: 18upx;
					}
					.busy{
						background: #FF8A57;
					}
					.repair{
						background: #848C95;
					}
				}
				.store-name{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					margin-top: 20upx;
					opacity: .5;
					.navigation-icon{
						width: 26upx;
						height: 34upx;
						margin-right: 10upx;
					}
				}
			}
		}
		.center-box{
			.appointment-tips{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
			}
			.down-icon{
				width: 30upx;
				height: 18upx;
				margin-top: 12upx;
			}
		}
		.time-box{
			.time-tips{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
			}
			.time{
				ont-family: Arial, Arial;
				font-weight: bold;
				font-size: 148rpx;
				color: #F9FAFE;
			}
		}
		.lattice-box{
			margin-top: 34upx;
			flex-wrap: wrap;
			.lattice-item{
				margin-right: 6upx;
				.lattice{
					width: 46upx;
					height: 48upx;
					background:rgba(0, 0, 0, .3);
					border-radius: 50%;
					text-align: center;
					margin-bottom: 10upx;
				}
				.blue{
					background: #26BCFD !important;
				}
				.white{
					background: linear-gradient( 180deg, #4AA22A 0%, #69D037 100%);
				}
				.red{
					background:#FF8A57!important;
				}
				.lattice-text{
					font-size: 20upx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 28upx;
					color: #FFFFFF;
				}
			}
		}
	}
	.repair-box{
		background: #464F58;
	}
	.mode-box{
		flex-wrap: wrap;
		.mode-item{
			background: #232428;
			border-radius: 20rpx;
			padding: 50upx 32upx 32upx 32upx;
			width: 276upx;
			margin-top: 14upx;
			margin-right: 14upx;
			&:nth-of-type(2n){
				margin-right:0;
			}
			.mode-img{
				width: 128upx;
				height: 128upx;
				margin-bottom: 58upx;
			}
			.mode-cont{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(255, 255, 255, .5);
				.mode-title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 48rpx;
					color: #FFFFFF;
					margin-bottom: 12upx;
				}
			}
		}
		.disabled{
			opacity: .3;
		}
	}
	.service-box{
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 34rpx;
		color: #FFFFFF;
		width: 414rpx;
		height: 96rpx;
		background: #232428;
		border-radius: 72rpx;
		margin:30upx auto;
		.service-icon{
			width: 96upx;
			height: 96upx;
			margin-right: 20upx;
		}
	}
</style>
